<template>
  <div v-loading="loading" class="app-container">
    <el-table :data="treeData" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id" border>
      <el-table-column label="权限标题" width="210px" prop="title" />
      <el-table-column label="权限名" width="160px" prop="name" />
      <el-table-column prop="path" label="路由" />
      <el-table-column prop="component" label="组件" />
      <el-table-column prop="permission" label="权限标识" />
      <el-table-column prop="type" label="类型" width="75px">
        <template slot-scope="scope">
          <span v-if="scope.row.type===1">页面</span>
          <span v-else>铵钮</span>
        </template>
      </el-table-column>
      <el-table-column prop="cache" label="缓存" width="70px">
        <template slot-scope="scope">
          <span v-if="scope.row.cache">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'Permission',
  data() {
    return {
      treeData: [],
      loading: true,
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      request({ url: '/sys/permission/getTree', method: 'get' }).then(data => {
        this.treeData = data
        this.loading = false
      }).catch(err => {
        this.$message.error('查询错误。' + err.message)
      })
    }
  }
}
</script>
